<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!-- HTML结构 -->
    <form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
        <p id="test-error" style="color:red"></p>
        <p>
            用户名: <input type="text" id="username" name="username">
        </p>
        <p>
            口令: <input type="password" id="password" name="password">
        </p>
        <p>
            重复口令: <input type="password" id="password-2">
        </p>
        <p>
            <button type="submit">提交</button> <button type="reset">重置</button>
        </p>
    </form>
    <script>
        let username = document.getElementById("username");
        let pwd_1 = document.getElementById("password");
        let pwd_2 = document.getElementById("password-2");
        const reUsername = /^[0-9A-Za-z]{3,10}$/;
        const rePwd = /^[0-9A-Za-z]{6,20}$/;

        if (!reUsername.exec(username.value) || !rePwd.exec(pwd_1.value) || pwd_1.value !== pwd_2.value) {
            alert("please recheck your password or username!")
            return false;
        }
    </script>
</body>
</html>